import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:hockey/extensions/jzx_widget_extension.dart';
import 'package:hockey/jzx_apps.dart';
import 'package:hockey/models/jzx_goods_data.dart';
import 'package:hockey/services/jzx_user.dart';

import 'controller.dart';

class JzxCoinsView extends GetView<JzxCoinsController> {
  const JzxCoinsView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: const JzxAAppBar(
        title: 'COIN SHOP',
        actions: [
          // InkWell(
          //   onTap: () {
          //     JzxLogPvManger.tracking(page: JzxLogPages.customer);
          //   },
          //   child:
          //       Assets.images.icService.image(width: 25).paddingOnly(right: 20),
          // ),
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              padding: const EdgeInsets.only(right: 12, left: 8),
              margin: EdgeInsets.only(top: 18.w + kNavigationBarHeight),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(100),
                  gradient: const LinearGradient(
                    colors: [Color(0xFF3FE1D8), Color(0xFF63FF6A)],
                  )),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Assets.images.icMineCoin.image(width: 24.w),
                  JzxGaps.w4,
                  Obx(() => Text(
                        '${JzxUserService.to.user.value.availableCoins}',
                        style: myAppColors.white.font_24,
                      ))
                ],
              ),
            ),
            Obx(
              () => GridView.builder(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                padding: const EdgeInsets.all(20),
                itemCount: controller.items.length,
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  mainAxisSpacing: 24,
                  crossAxisSpacing: 25,
                  childAspectRatio: 155 / 200,
                ),
                itemBuilder: (context, index) {
                  final item = controller.items[index];
                  return _CoinItem(item: item);
                },
              ),
            ),
          ],
        ),
      ).backgroud(Assets.images.normalBgv),
    );
  }
}

class _CoinItem extends GetView<JzxCoinsController> {
  const _CoinItem({
    super.key,
    required this.item,
  });

  final JzxGoodsData item;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        controller.serverPayment(item);
      }.throttleWithTimeout(timeout: 3000),
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          Container(
            width: double.infinity,
            padding: EdgeInsets.only(top: 54.w, left: 10, right: 10),
            decoration: BoxDecoration(
                color: const Color(0x1AFFFFFF),
                borderRadius: BorderRadius.circular(12)),
            child: Column(
              children: [
                Assets.images.icMineCoin.image(height: 58.w),
                JzxGaps.h10,
                Text.rich(
                  TextSpan(children: [
                    TextSpan(
                      text: item.exchangeCoin.toString(),
                      style: GoogleFonts.secularOne(
                        fontSize: 20.sp,
                        color: Colors.white,
                      ),
                    ),
                    if (item.discount > 0) const WidgetSpan(child: JzxGaps.w5),
                    if (item.discount > 0)
                      TextSpan(
                        text: '↓${(item.discount * 100).toStringAsFixed(0)}%',
                        style: GoogleFonts.secularOne(
                          fontSize: 9.sp,
                          color: const Color(0xFF48E9BF),
                        ),
                      ),
                  ]),
                ),
                JzxGaps.h4,
                Text.rich(
                  TextSpan(children: [
                    TextSpan(
                      text: '\$${item.price}',
                      style: GoogleFonts.secularOne(
                        fontSize: 14.sp,
                        color: Colors.white,
                      ),
                    ),
                    if (item.originalPrice != item.price)
                      const WidgetSpan(child: JzxGaps.w8),
                    if (item.originalPrice != item.price)
                      TextSpan(
                        text: '\$${item.originalPrice}',
                        style: GoogleFonts.secularOne(
                          fontSize: 10.sp,
                          color: const Color(0xFF48E9BF),
                          decoration: TextDecoration.lineThrough,
                        ),
                      ),
                  ]),
                ),
              ],
            ),
          ),
          Positioned(
            right: -6,
            top: 12,
            child: item.tags.isNotEmpty
                ? (item.tags == 'Big Deal'
                    ? Assets.images.icBigDeal.image(height: 29.w)
                    : item.tags == 'Hot'
                        ? Assets.images.icHot.image(height: 29.w)
                        : Assets.images.icGreatSale.image(height: 29.w))
                : const SizedBox.shrink(),
          ),
        ],
      ),
    );
  }
}
